<template>
  <div class="register">
    <div class="identy-wrapper">
      <div class="textBox">
        <div class="welcome">欢迎注册</div>
        <div class="ask">
          已有帐号？ &nbsp;
          <router-link class="btn" to="/login">去登录</router-link>
        </div>
      </div>
      <div class="form-wrapper">
        <van-form @submit="onSubmit" autocomplete="off">
          <van-cell-group inset>
            <van-field
              v-model="phone"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
              v-model="password"
              type="text"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="checkPassword"
              type="text"
              name="确认密码"
              label="确认密码"
              placeholder="请再次填写密码"
              :rules="[{ required: true, message: '请填写确认密码' }]"
            />
            <!-- <van-field
              v-model="verifyword"
              type="text"
              name="验证码"
              label="验证码"
              placeholder="验证码"
              :rules="[{ required: true, message: '请填写密码' }]"
            /> -->
          </van-cell-group>
          <div style="margin: 32px 16px">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import { onBeforeMount } from "@vue/runtime-core";
import { Toast } from "vant";
import { dosignup } from "@/api/interface.js";

export default {
  setup() {
    const state = reactive({
      phone: "",
      password: "",
      verifyword: "",
      checkPassword: "",
    });
    const passwordReg = /^[\w_-]{6,16}$/;
    const phoneReg = /^\d{11}/;
    const onSubmit = async (values) => {
      if (!phoneReg.test(state.phone)) {
        Toast({
          message: "输入正确的手机号喔",
        });
        return;
      }
      if (state.password == "") {
        Toast({
          message: "密码忘记写了喔",
        });
        return;
      }
      if (!passwordReg.test(state.password)) {
        Toast({
          message: "密码是6-16位喔",
        });
        return;
      }
      if (state.checkPassword !== state.password) {
        Toast({
          message: "两次密码不一致喔",
        });
        return;
      }
      const sendData = {
        phone: state.phone,
        password: state.password,
      };
      await dosignup(sendData)
        .then(() => {
          window.location.href = "/login";
        })
        .catch((err) => {
          console.log("err", err);
          state.password = "";
          state.checkPassword = "";
        });
    };

    onBeforeMount(() => {});
    return { ...toRefs(state), onSubmit };
  },
};
</script>
<style lang="less" scoped>
.register {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.identy-wrapper {
  margin-top: 10vh;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-sizing: border-box;
    .textBox {
    height: 100px;
    .welcome {
      margin-left: 32px;
      margin-top: 25px;
      font-size: 32px;
      color: #000;
      font-weight: bold;
    }
    .ask {
      margin-left: 32px;
      margin-top: 5px;
      font-size: 16px;
      cursor: pointer;
      .btn {
        color: #529de6;
      }
    }
  }
}
</style>
